<template>
  <div>
    <el-card>
      <el-row>
        <el-col>
          <el-button
            type="primary"
            @click="showCateDialog()"
            style="margin-left: 5px"
            >添加商品</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <!-- <el-table-column label="ID" prop="id"> </el-table-column> -->
      <el-table-column label="商品名称" prop="commodityName"> </el-table-column>
      <el-table-column label="商品描述" prop="commodityExplain">
      </el-table-column>
      <el-table-column label="商品分类" prop="classificationName">
      </el-table-column>

      <el-table-column label="操作">
        <template scope="scope">
          <!-- <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button> -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDel(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加分类对话框 -->
    <el-dialog title="添加商品" :visible.sync="addCateDialogVisible">
      <!-- 添加分类的表单 -->
      <el-form
        :model="addForm"
        ref="addCateFormRef"
        :rules="addCateFormRules"
        label-width="100px"
      >
        <el-form-item label="商品名称:" prop="CommodityName">
          <el-input v-model="addForm.CommodityName"></el-input>
        </el-form-item>
        <el-form-item label="商品描述:" prop="CommodityExplain">
          <el-input v-model="addForm.CommodityExplain"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="cateList">
          <el-cascader
            expand-trigger="hover"
            v-model="selectedKeys"
            :options="cateList"
            :props="catProps"
            @change="handleChange"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateclick">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑分类名称 -->
    <!-- <el-dialog
      title="编辑分类名称"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form ref="form" :model="form" :rules="addCateFormRules">
        <el-form-item
          label="参数名称"
          :label-width="formLabelWidth"
          prop="SpecificationName"
        >
          <el-input
            v-model="form.SpecificationName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm('form')">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { editSpe, deleteSpeChild } from "../../api/spe";
import { getType } from "../../api/type";
import { gteCommspu, addCommspu, deleteCommspu } from "../../api/comm";

export default {
  data() {
    return {
      addForm: {
        CommodityName: "",
        CommodityExplain: "",
        // 商品所属的分类ID
        CommodityClassificationId: 0,
        UserId: 5,
      },
      catProps: {
        value: "id",
        label: "classificationName",
        children: "children",
        checkStrictly: true,
      },
      dynamicTags: [],
      cateList: [],
      formLabelWidth: "120px",
      allRole: [],
      //子级
      parentCateList: {},
      addCateDialogVisible: false,
      // 添加分类表单数据对象
      addCateForm: {
        // 将要添加的分类名称
        SpecificationName: "",
        // 父级分类的id
        parentLevelId: 0,
      },
      dialogFormVisible: false,
      form: {
        SpecificationName: "",
        id: 0,
        newIndex: 0,
      },
      listLoading: false,
      // 表格数据
      tableData: [],
      selectedKeys: {},
      addCateFormRules: {
        CommodityName: [
          { required: true, message: "请输入分参数名称", trigger: "blur" },
        ],
        cateList: [{ required: true, message: "请选择分类", trigger: "blur" }],
      },
    };
  },
  mounted() {
    getType().then(({ data }) => {
      this.cateList = data.data;
      console.log(data.data);
    });
    this.AllSpu();
  },

  methods: {
    // 级联选择器选中项变化，会触发这个函数
    handleChange(values) {
      console.log(values);
      console.log(values[values.length - 1]);
      var end = values[values.length - 1];
      this.addForm.CommodityClassificationId = end;
      console.log(this.addForm.CommodityClassificationId);
    },
    //查找所有商品SPU
    AllSpu() {
      var spuId = this.addForm.UserId;
      gteCommspu(spuId)
        .then(({ data }) => {
          console.log(data.data);
          if (data.data == "") {
            console.log("");
          } else {

            this.tableData = data.data.reverse();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //删除子级参数
    handleClose(tag) {
      console.log(tag);
      let obj = {
        SpecificationName: tag,
      };
      console.log(obj);
      deleteSpeChild(obj)
        .then(({ data }) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
      this.tableData.forEach((Element) => {
        // console.log(Element.lib);
        // console.log(Element.lib.indexOf(tag));
        if (Element.lib.indexOf(tag) >= 0) {
          Element.lib.splice(Element.lib.indexOf(tag), 1);
        } else {
          console.log("aa");
        }
      });
    },
    //展示
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick((item) => {
        console.log(item);
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    parentCateChanged(values) {
      console.log(values);
      // 如果selectedKeys数组中的length大于0，证明选中的父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的ID
        this.addCateForm.parentLevelId =
          this.selectedKeys[this.selectedKeys.length - 1];

        // eslint-disable-next-line no-useless-return
        return;
      } else {
        // 父级分类的id
        this.addCateForm.parentLevelId = 0;
      }
    },
    //添加
    showCateDialog() {
      this.addCateDialogVisible = true;
    },
    // 提交添加父级参数(确定按钮)
    addCateclick() {
      if (this.addForm.CommodityName == "") {
        this.$message({
          showClose: true,
          message: "商品名称不能为空!",
          type: "error",
        });
        console.log("商品名称不能为空");
      } else if (
        this.addForm.CommodityClassificationId == 0 ||
        this.addForm.CommodityClassificationId == undefined
      ) {
        this.$message({
          showClose: true,
          message: "请选择分类!",
          type: "error",
        });

        console.log("请选择分类");
      } else {
        addCommspu(this.addForm)
          .then(({ data }) => {
            if (data.data == "") {
              this.$message({
                showClose: true,
                message: data.msg,
                type: "error",
              });
            } else {
              this.$message({
                showClose: true,
                message: data.msg,
                type: "success",
              });
              this.tableData.unshift(data.data);
              this.addCateDialogVisible = false;
            }
            console.log(data);
          })
          .catch((err) => {
            console.log(err);
          });

        console.log(this.addForm);
      }
    },
    //编辑父类参数
    // handleEdit(index, row) {
    //   console.log(row);
    //   this.form.SpecificationName = row.name;
    //   this.form.id = row.id;
    //   this.form.newIndex = index;
    //   this.dialogFormVisible = true;
    // },
    // 修改分类名称
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(valid);
          editSpe(this.form)
            .then(({ data }) => {
              console.log(data);
              this.$message({
                showClose: true,
                message: data.msg,
                type: "success",
              });
              window.location.reload();
            })
            .catch((err) => {
              console.log(err);
            });
          console.log(this.form);
          //   editType(this.form.id, this.form).then(({ data }) => {
          //     this.tableData.splice(this.form.newIndex,data.data);
          //     this.dialogFormVisible = false;
          //   });
        } else {
          this.$message.error("该空不能为空，请填写完毕重新提交");
        }
      });
    },
    //删除父级分类
    handleDel(index, row) {
      console.log(index, row);
      deleteCommspu(row.id)
        .then(({ data }) => {
          this.$message({
            showClose: true,
            message: data.msg,
            type: "success",
          });
          console.log(data);
          this.tableData.splice(index, 1);
        })
        .catch((err) => {
          console.log(err);
        });
      // deleteSpe(row.id)
      //   .then(({ data }) => {
      //     console.log(data);
      //     this.tableData.splice(index, 1);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
  },
};
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>